<template>
    <!--  :style="{visibility: addressMenuIsShow? 'visible': 'hidden'}" -->
    <view class="addressSelection" v-if="addressMenuIsShow">
        <!-- <transition name="move"> -->
            <view class="addressTertiary" :animation="animationAddressMenu">
                <view style="height:10% ;width:95%;margin-top:10rpx">
                    <text @click.stop.prevent="addressSelectionHide">取消</text>
                    <text style="float: right" @click.stop.prevent="addressSelectionGain">确定</text>
                </view>
                <!--"可以显示默认的城市，使用后级联选择城市反应很慢就不使用了-->
                <!-- <picker-view style="width: 100%; height: 300px;" :value="region" @change.stop.prevent="tertiaryChage($event)">
                    <picker-view-column>
                        <view class="picker-item" v-for="(itemProvinces, indexProvinces) in provinces" :key="indexProvinces">{{itemProvinces.name}}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="picker-item" v-for="(itemCitys, indexCitys) in citys" :key="indexCitys">{{itemCitys.name}}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="picker-item" v-for="(itemAreas, indexAreas) in areas" :key="indexAreas">{{itemAreas.name}}</view>
                    </picker-view-column>
                </picker-view> -->
                <picker-view style="width: 100%; height: 300px;" :value="region" @change.stop.prevent="tertiaryChage($event)">
                    <picker-view-column>
                        <view class="picker-item" v-for="(itemProvinces, indexProvinces) in provinceList" :key="indexProvinces">{{itemProvinces}}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="picker-item" v-for="(itemCitys, indexCitys) in cityList" :key="indexCitys">{{itemCitys}}</view>
                    </picker-view-column>
                    <picker-view-column  v-if="areaList.length > 0">
                        <view class="picker-item" v-for="(itemAreas, indexAreas) in areaList" :key="indexAreas">{{itemAreas}}</view>
                    </picker-view-column>
                </picker-view>
            </view>
        <!-- </transition> -->
    </view >
</template>

<script>

import {showMessager} from '@/config/wUtils'
// import {provinces, citys, areas} from '@/config/city'
import {address} from '@/config/area'
export default {
    components: {},
    props: ['addressMenuIsShow'],
    data() {
        return {
            // 动画 对象
            animation: {},
            // 三级联动 动画
            animationAddressMenu: {},
            region: [0,0,0],
            // provinces: [],
            // citys: [],
            // areas: [],
            // province: '',
            // city: '',
            // area: '',
            provinceList: [],
            citysList: [],
            cityList: [],
            areasList: [],
            areaList: []
        }
    },
    watch: {
        addressMenuIsShow: {
            handler:function(val){
                let self = this
                console.log(val, "深度监听 addressMenuIsShow")
                self.$nextTick(() => {
                    if (val) {
                        // 执行动画
                        self.startAddressAnimation(val)
                    } else {
                        self.region = [0,0,0]
                    }
                })
            },
            deep:true
        },
        region: {
            handler:function(val){
                let self = this
                // val = [省（index）, 市， 区]
                console.log(val, "深度监听 region")
                self.$nextTick(() => {
                    // // // console.log(citys, provinces, areas)
                    // // // const id = provinces[val[0]].id
                    // // // self.citys = citys[id]
                    // // // self.areas = areas[citys[id][0].id]
                    // self.province = self.provinces[val[0]].name
                    // self.city = self.citys[val[1]].name
                    // self.area = self.areas[val[2]].name
                    // console.log(self.province, self.city, self.area)

                    // self.provinceList = address
                    self.cityList = self.citysList[val[0]]
                    self.areaList = self.areasList[val[0]][val[1]]
                    // console.log(self.areasList, '........self.areasList')
                    // console.log(self.cityList, '.........self.cityList')
                })
            },
            deep:true
        },
    },
   
    mounted() {
        let self = this;
        // 初始化 城市三级联动组件
        self.initAddressModule();
    },
    methods: {
        // 初始化 城市三级联动组件
        initAddressModule() {
            let self = this;
            // 初始化动画变量
            const animation = wx.createAnimation({
                duration: 500,
                transformOrigin: "50% 50%",
                timingFunction: 'ease',
            })
            // 动画 对象
            self.animation = animation
            // // 默认联动显示北京
            // const id = provinces[0].id
            // self.provinces = provinces
            // self.citys = citys[id]
            // // .slice(1)
            // self.areas = areas[citys[id][0].id]
            
            self.provinceList = []
            address.forEach((itemState, index) => {
                // console.log(itemState, '...............item')
                self.provinceList.push(itemState.state)
                const cityArray = []
                const areasArray = []
                itemState.cities.forEach((itemCity, index) => {
                    cityArray.push(itemCity.city)
                    const areaArray = []
                    itemCity.areas.forEach((itemCounty, index) => {
                        areaArray.push(itemCounty.county)
                    })
                    areasArray.push(areaArray)
                })
                self.citysList.push(cityArray)
                self.areasList.push(areasArray)
                // self.areaList = item.cities.areas.county
            });
            self.cityList =  self.citysList[0]
            self.areaList = self.areasList[0][0]
            // self.provinceList = address
            // self.cityList = self.provinceList[0].cities
            // self.areaList = self.cityList[0].areas
            console.log(self.areasList, '.........areasList')
        },
        // 执行动画
        startAddressAnimation(isShow) {
            console.log('执行动画')
            let self = this;
            if (isShow) {
                self.animation.translateY(0 + 'vh').step()
            } else {
                self.animation.translateY(400 + 'vh').step()
            }
            self.animationAddressMenu = self.animation.export()
            console.log(self.animationAddressMenu, '.....self.animationAddressMenu')
        },
        // 三级联动 改变
        tertiaryChage(e) {
            let self = this;
            console.log('三级联动 改变', e)
            // let address = e.mp.detail.value
            // // let provinces = self.provinces
            // // let citys = citys
            // // let areas = areas
            // let provinceNum = address[0]
            // let cityNum = address[1]
            // let countyNum = address[2]
            // console.log(e.mp.detail.value, '.....saddress')
            // // self.region = [12, 2, 2]
            // // console.log(provinceNum, cityNum, countyNum, '...............countyNum')
            // console.log(self.region[0], self.region[1], self.region[2], '.....................self.region[2]')
            // if (self.region[0] != provinceNum) {
            //     let id = provinces[provinceNum].id
            //     self.region = [provinceNum, 0, 0]
            //     self.citys = citys[id]
            //     self.areas = areas[citys[id][0].id]
            // } else if (self.region[1] != cityNum) {
            //     let id = self.citys[cityNum].id
            //     console.log(id,'.......id')
            //     self.region = [provinceNum, cityNum, 0]
            //     self.areas = areas[self.citys[cityNum].id]
            //     console.log(self.areas, '...........self.areas')
            // } else {
            //     self.region = [provinceNum, cityNum, countyNum]
            //     // this.setData({
            //     //     value: [provinceNum, cityNum, countyNum]
            //     // })
            // }

            let addressIndex = e.mp.detail.value
            let provinceNum = addressIndex[0]
            let cityNum = addressIndex[1]
            let countyNum = addressIndex[2]
            if (self.region[0] != provinceNum) {
                self.region = [provinceNum, 0, 0]
            } else if (self.region[1] != cityNum) {
                self.region = [provinceNum, cityNum, 0]
            } else {
                self.region = [provinceNum, cityNum, countyNum]
            }
            console.log(self.region, '.....self.region')
        },
        // 隐藏 地址选择器
        addressSelectionHide() {
            let self = this;
            // self.addressMenuIsShow = false
            self.$emit("addressModuleClose", false);
        },
        // 确定 地址选择器
        addressSelectionGain() {
            let self = this;
            console.log(self.region)
            console.log(self.provinceList[self.region[0]], self.cityList[self.region[1]], self.areaList[self.region[2]])
            self.$emit("addressModuleClose", false);
        },
    },
    // 页面显示
    onShow () {
        let self = this;
        console.log('页面显示')
    }
};
</script>

<style lang="less" scoped>
.addressSelection{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.3);
    .addressTertiary{
        width: 100%;
        display: flex;
        z-index:12;
        background-color: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0rpx;
        left: 0rpx;
        height: 40vh;
        // transform: translate3d(0, 0, 0);
        // &.move-enter-active, &.move-leave-active{
        //     transition: all 0.2s linear;
        // }
        // &.move-enter, &.move-leave-active{
        //     transform: translate3d(100%, 0, 0);
        // }

        
        .picker-item {
            line-height: 70rpx;
            margin-left: 5rpx;
            margin-right: 5rpx;
            text-align: center;
        }
        
                
    }
    
}
</style>
